<template>
  <view class="pagesD tn-safe-area-inset-bottom">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__logo" @click="tn('')">
          <view class="tn-icon-install" style="color: #00FD00;"></view>
        </view>
        <!-- <view class="tn-flex-col-center tn-flex-row-center tn-text-lg">
          <text class="tn-text-xxl tn-color-white">FISH</text>
        </view> -->
      </view>
    </tn-nav-bar>

 
    <view class="" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}">
      
      <view class="tn-margin-left tn-margin-right">
      <!-- 图标logo/头像 -->
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            
            <view class="tn-padding-right">
              <view class="tn-padding-right tn-padding-left-sm">
                <text class="tn-color-white tn-text-bold" style="font-size: 42rpx;">抓住那只猪</text>
              </view>
              <view class="tn-padding-right tn-padding-top-sm tn-padding-left-sm tn-text-ellipsis" @click="copyUid">
                <text class="tn-color-gray">Uid: 10262008</text>
                <text class="tn-color-white tn-padding-left-xs tn-text-sm tn-icon-copy"></text>
              </view>
            </view>

          </view>
        </view>
        <view class="justify-content-item tn-margin-right-sm" @click="tn('/minePages/set')">
          <view class="logo-pic">
            <view class="logo-image tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/album/xiong2.jpg');width: 120rpx;height: 120rpx;background-size: cover;overflow: hidden;">
            </view>
          </view>
        </view>
      </view>
      
      <!-- 用户没有授权，则显示这个授权按钮，自行看着需不需要用就行-->
     <!-- <view class="tn-flex tn-flex-row-between tn-padding-bottom tn-padding-top-lg" @click="tn('/minePages/login')">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button shape="round" backgroundColor="#FFFFFF" fontColor="#3A404B" padding="20rpx 0" width="40%">
            <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
            <text class="">授权登录</text>
          </tn-button>
        </view>
      </view> -->
      
        
      </view>
      

      <!-- 方式12 start-->
      <view class="tn-padding" style="padding-top: 40rpx;">
        
        <view class="tn-flex tn-flex-row-between">
          <view class="tn-padding-xs" @click="tn('/pages/order/order')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #FFC820;border: 2rpx solid #FFC820;background-color: #FFC82030;">
                <view class="tn-icon-stack"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis tn-text-xs tn-color-white">全部订单</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-xs" @click="tn('/minePages/vip')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #00ED98;border: 2rpx solid #00ED98;background-color: #00ED9830;">
                <view class="tn-icon-vip-diamond-fill"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis  tn-text-xs tn-color-white">会员权益</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-xs" @click="tn('/minePages/set')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #00E6FF;border: 2rpx solid #00E6FF;background-color: #00E6FF30;">
                <view class="tn-icon-identity-fill"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis tn-text-xs tn-color-white">个人信息</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-xs" @click="tn('/minePages/help')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #F1012F;border: 2rpx solid #F1012F;background-color: #F1012F30;">
                <view class="tn-icon-topics-fill"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis tn-text-xs tn-color-white">常见问题</text>
              </view>
            </view>
          </view>
        </view>
        
      </view>
      
      <!-- 更多信息-->
      <view class="tn-margin" style="border-radius: 30rpx;background-color: #171E17;">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" backgroundColor="#FFFFFF00" @click="tn('/minePages/public')">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-fireworks" style="color: #00FD00;"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-color-white tn-text-sm">关注我们</view>
            <view class="tn-color-gray tn-icon-right"></view>
          </view>
        </tn-list-cell>
      </view>
      
      
      <view class="tn-margin" style="border-radius: 30rpx;background-color: #171E17;">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" backgroundColor="#FFFFFF00">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #1d2541;">
              <view class="tn-icon-service-simple" style="color: #00FD00;"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm tn-color-white tn-text-sm">专属客服</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" backgroundColor="#FFFFFF00">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #1d2541;">
              <view class="tn-icon-help" style="color: #00FD00;"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm tn-color-white tn-text-sm">问题反馈</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" backgroundColor="#FFFFFF00" @click="callPhoneNumber" data-number="18266666666">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #1d2541;">
              <view class="tn-icon-phone" style="color: #00FD00;"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-color-white tn-text-sm">技术热线</view>
            <view
              class="tn-margin-left-sm tn-color-gray tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-round" style="background-color: #171E17;">
              188****8888</view>
          </view>
        </tn-list-cell>
      </view>

    </view>
    
    <view class="tn-text-center tn-margin-top-xl tn-padding-bottom-xl tn-text-sm tn-color-gray" style="opacity: 0.5;">
    	<view @click="navTuniaoUI">
        <text class="">—</text>
        <text class="tn-padding-xs">图鸟科技</text>
        <text class="tn-padding-xs">提供技术支持</text>
        <text class="">—</text>
      </view>
    </view>
   

    <view class="tn-tabbar-height"></view>

  </view>
</template>

<script>
  export default {
    name: 'PageD',
    data() {
      return {
      }
    },
    methods: {
      
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      
      // 跳转到图鸟UI
      navTuniaoUI() {
        uni.navigateToMiniProgram({
          appId: 'wxf3d81a452b88ff4b'
        })
      },
      
      // 收货地址
      navAddress() {
        uni.chooseAddress({
        })
      },
      
      //拨打固定电话
      callPhoneNumber() {
        uni.makePhoneCall({
          phoneNumber: "18219128888",
        });
      },
      // 复制id
      copyUid() {
        wx.vibrateShort();
        uni.setClipboardData({
          data: "10262008",
        })
      },
      // 复制开源地址
      copySource() {
        wx.vibrateShort();
        uni.setClipboardData({
          data: "https://ext.dcloud.net.cn/publisher?id=356088",
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pagesD{
    max-height: 100vh;
  }
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;

    &__logo {
      margin: auto 5rpx;
      font-size: 50rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
  }
  /* 自定义导航栏内容 end */
  

  /* 用户头像 start */
  .logo-image {
    width: 120rpx;
    height: 120rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    border: 6rpx solid rgba(255,255,255,0.85);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  

  /* 图标容器12 start */
  .icon12 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 46rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
  
      &--icon {
        width: 50rpx;
        height: 50rpx;
        font-size: 36rpx;
        position: relative;
        z-index: 1;
      }
    }
  }
  
  /* 图标容器1 end */
  
</style>
